<template>
  <view class="auth-form">
    <view class="head-info">
      <view class="card"></view>
      <view class="notice">请进行实名认证</view>
      <view class="desc"
        >应电子合同相关法律法规要求，当前操作需进行本人实名认证以确保本人意愿。您的个人信息仅用于确认本人身份，可信借条将严格保证您的信息安全。</view
      >
    </view>
    <view class="form">
      <u-form label-position="top">
        <u-form-item label="证件类型">
          <u-input v-model="form.type" type="select" @click="show = true" />
          <u-action-sheet
            :list="actionSheetList"
            v-model="show"
            @click="actionSheetCallback"
          ></u-action-sheet>
        </u-form-item>
        <view class="form-item">
          <view class="title">姓名</view>
          <view class="ipt-wrapper">
            <view class="ipt-icon"></view>
            <input class="ipt" v-model="form.name" placeholder="请输入姓名" />
          </view>
        </view>
        <view class="form-item">
          <view class="title">证件号</view>
          <view class="ipt-wrapper">
            <view class="ipt-icon icon-card"></view>
            <input
              class="ipt"
              v-model="form.idcode"
              placeholder="请输入证件号"
            />
          </view>
        </view>
        <view class="form-item">
          <view class="title">手机号</view>
          <view class="ipt-wrapper">
            <view class="ipt-icon icon-mobile"></view>
            <input
              class="ipt"
              v-model="form.mobile"
              placeholder="请输入手机号"
            />
          </view>
        </view>
      </u-form>
      <view class="footer-checked">
        <u-checkbox
          v-model="agree"
          active-color="#2a82e4"
          @change="checkboxChange"
        >
          <view class="txt">
            我同意服务提供者及开发关联企业使用并传送相关数据用于身份核验。查看
            <text>《可信借条用户注册与使用协议》</text>
            、<text>《可信借条数字证书申请及使用协议》</text>
            <text>《可信借条隐私政策》</text
            >及<text>《第三方个人信息共享清单》</text>。我承诺仅为合法交易使用本服务
          </view>
        </u-checkbox>
      </view>
    </view>
    <view class="next"> 下一步 </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      actionSheetList: [
        {
          text: '身份证'
        },
        {
          text: '社保卡'
        }
      ],
      show: false,
      agree: false,

      form: {
        type: '身份证',
        name: '',
        idcode: '',
        mobile: ''
      }
    }
  },
  onLoad() {},
  methods: {
    // 点击actionSheet回调
    actionSheetCallback(index) {
      this.form.reason = this.actionSheetList[index].text
    },
    checkboxChange(v) {
      v.value = this.agree
    }
  }
}
</script>

<style lang="scss" scoped>
@function rpx($num) {
  @return $num + rpx;
}
page {
  background-color: #fff;
  font-size: rpx(30);
}
.auth-form {
  padding: rpx(50) rpx(30);
}
.head-info {
  .card {
    width: rpx(400);
    height: rpx(250);
    background: url('../../static/images/auth-form/idcard.png') no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
  }

  .notice {
    width: 100%;
    text-align: center;
    font-size: rpx(38);
    padding: rpx(20) 0;
    font-weight: 700;
  }

  .desc {
    font-size: rpx(26);
    padding: rpx(20);
  }
}

.form-item {
  margin-bottom: rpx(20);
  .title {
    padding: rpx(20) 0;
  }

  .ipt-wrapper {
    border-bottom: 1px solid #f4f6f8;
    display: flex;
    align-items: center;
    padding-bottom: rpx(20);

    .ipt-icon {
      width: rpx(32);
      height: rpx(32);
      background: url('../../static/images/auth-form/user.png') no-repeat;
      background-size: 100% 100%;

      &.icon-card {
        background: url('../../static/images/auth-form/icon-idcard.png')
          no-repeat;
        background-size: 100% 100%;
      }
      &.icon-card {
        background: url('../../static/images/auth-form/icon-idcard.png')
          no-repeat;
        background-size: 100% 100%;
      }
      &.icon-mobile {
        background: url('../../static/images/auth-form/mobile.png') no-repeat;
        background-size: 100% 100%;
      }
    }

    .ipt {
      padding: 0 rpx(30);
      width: 100%;
    }
  }
}
.txt {
  font-size: rpx(26);
  text {
    color: #1296db;
    cursor: pointer;
  }
}
.next {
  width: rpx(428);
  height: rpx(84);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: rpx(20);
  margin: rpx(40) auto;
  background-color: #2a82e4;
  color: #fff;
}
</style>
